<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>微博 | 登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content=""/>
	<meta name="keywords" content=""/>
	<link rel="stylesheet" type="text/css" href="../static/css/animate.css">
	<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../static/css/line-awesome.css">
	<link rel="stylesheet" type="text/css" href="../static/css/line-awesome-font-awesome.min.css">
	<link href="../static/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<link href="../static/lib/slick/slick.css" rel="stylesheet" type="text/css">
	<link href="../static/lib/slick/slick-theme.css" rel="stylesheet" type="text/css">
	<link href="../static/css/style.css" rel="stylesheet" type="text/css">
	<link href="../static/css/responsive.css" rel="stylesheet" type="text/css">
	<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<!-- 滑块样式-->
	<style>
		.drag {
			width: 270px;
			height: 40px;
			line-height: 40px;
			background-color: #e8e8e8;
			position: relative;
			margin: 0 auto;
		}

		.bg {
			width: 0;
			height: 100%;
			position: absolute;
			background-color: #75CDF9;
		}

		.text {
			position: absolute;
			width: 100%;
			height: 100%;
			text-align: center;
			user-select: none;
		}

		.btn {
			width: 40px;
			height: 38px;
			position: absolute;
			border: 1px solid #ccc;
			cursor: move;
			font-family: "宋体";
			text-align: center;
			background-color: #fff;
			user-select: none;
			color: #666;
		}
	</style>
</head>

<body class="sign-in">
	<div class="wrapper">
		<div class="sign-in-page">
			<div class="signin-popup">
				<div class="signin-pop">
					<div class="row">
						<div class="col-lg-6">
							<div class="cmp-info">
								<div class="cm-logo">
									<a href="index.html" th:href="@{index}"><img alt=""
																				 src="../static/images/cm-logo.png"></a>
									<p>
										微博是一种基于用户关系信息分享、传播以及获取的通过关注机制分享简短实时信息的广播式的社交媒体，允许用户以文字、图片、视频等多媒体形式，实现信息的即时分享、传播互动。</p>
								</div><!--cm-logo end-->	
								<img src="../static/images/cm-main-img.png" alt="">
							</div><!--cmp-info end-->
						</div>
						<div class="col-lg-6">
							<div class="login-sec">
								<ul class="sign-control">
									<li data-tab="tab-1" class="current"><a href="#" title="">登录</a></li>
									<li data-tab="tab-2"><a href="#" title="">注册</a></li>
								</ul>
								<div class="sign_in_sec current" id="tab-1">
									<h3>登录</h3>
									<form th:action="@{/user/login}" th:method="post">
										<div class="row">
											<div class="col-lg-12 no-pdd">
												<div class="sn-field">
													<input name="uid" placeholder="用户名/邮箱/手机号" type="text">
													<i class="la la-user"></i>
												</div><!--sn-field end-->
											</div>
											<div class="col-lg-12 no-pdd">
												<div class="sn-field">
													<input name="pwd" placeholder="密码" type="password">
													<i class="la la-lock"></i>
												</div>
											</div>
											<div class="col-lg-12 no-pdd">
												<div class="checky-sec">
													<div class="fgt-sec">
														<input type="checkbox" name="cc" id="c1">
														<label for="c1">
															<span></span>
														</label>
														<small>记住我</small>
													</div><!--fgt-sec end-->
													<a href="#" title="">忘记密码？</a>
												</div>
											</div>
											<div class="col-lg-12 no-pdd">
												<button type="submit" value="submit">登 录</button>
												<span class="red" th:text="${msg}"></span>
											</div>
										</div>
									</form>
									<div class="login-resources">
										<h4>通过社交账号登录</h4>
										<ul>
											<li><a href="#" title="" class="qq"><i class="fa fa-qq"></i>QQ登录</a></li>
											<li><a href="#" title="" class="wc"><i class="fa fa-wechat"></i>微信登录</a></li>
										</ul>
									</div><!--login-resources end-->
								</div><!--sign_in_sec end-->
								<div class="sign_in_sec" id="tab-2">
									<div class="dff-tab current" id="tab-3">
										<h3>注册</h3>
										<form onsubmit="return register()" th:action="@{/user/register}"
											  th:method="post">
											<div class="row">
												<span class="red" id="uid_check"></span>
												<div class="col-lg-12 no-pdd">
													<div class="sn-field">
														<input id="uid" name="uid" placeholder="账号" type="text">
														<i class="la la-user"></i>
													</div>
												</div>
												<span class="red" id="name_check"></span>
												<div class="col-lg-12 no-pdd">
													<div class="sn-field">
														<input id="name" name="name" placeholder="昵称" type="text">
														<i class="la la-user-secret"></i>
													</div>
												</div>
												<span class="red" id="phone_check"></span>
												<div class="col-lg-12 no-pdd">
													<div class="sn-field">
														<input id="phone" name="phone" placeholder="手机号" type="text">
														<i class="la la-phone"></i>
													</div>
												</div>
												<div class="col-lg-12 no-pdd">
													<div class="sn-field">
														<div class="drag" id="hk">
															<div class="bg"></div>
															<div class="text" onselectstart="return false;">请拖动滑块发送验证码
															</div>
															<div class="btn">&gt;&gt;</div>
														</div>
													</div>
												</div>
												<span class="red" id="check_check"></span>
												<div class="col-lg-12 no-pdd">
													<div class="sn-field">
														<input id="check" name="check" placeholder="验证码" type="text">
														<i class="la la-lock"></i>
													</div>
												</div>
												<span class="red" id="pwd_check"></span>
												<div class="col-lg-12 no-pdd">
													<div class="sn-field">
														<input id="pwd" name="pwd" placeholder="密码" type="password">
														<i class="la la-lock"></i>
													</div>
												</div>
												<span class="red" id="contract_check"></span>
												<div class="col-lg-12 no-pdd">
													<div class="checky-sec st2">
														<div class="fgt-sec">
															<input id="contract" name="contract" type="checkbox">
															<label for="contract">
																<span></span>
															</label>
															<small>我已阅读并同意<a href="#">用户协议</a>与<a href="#">隐私条款</a><span
																	style="color: white">占个位</span></small>
														</div><!--fgt-sec end-->
													</div>
												</div>
												<div class="col-lg-12 no-pdd">
													<button id="submit2" type="submit" value="submit">注册微博</button>
													<span class="red" style="margin-left:8px;" th:text="${msg2}"></span>
												</div>
											</div>
										</form>
									</div><!--dff-tab end-->
								</div>		
							</div><!--login-sec end-->
						</div>
					</div>		
				</div><!--signin-pop end-->
			</div><!--signin-popup end-->
			<div class="footy-sec">
				<div class="container">
					<ul>
						<li><a href="#" title="">帮助中心</a></li>
						<li><a href="#" title="">隐私政策</a></li>
						<li><a href="#" title="">社区准则</a></li>
						<li><a href="#" title="">Cookies政策</a></li>
						<li><a href="#" title="">事业</a></li>
						<li><a href="#" title="">论坛</a></li>
						<li><a href="#" title="">语言</a></li>
						<li><a href="#" title="">版权政策</a></li>
					</ul>
					<p><img src="../static/images/copy-icon.png" alt="">Copyright 2020</p>
				</div>
			</div><!--footy-sec end-->
		</div><!--sign-in-page end-->


	</div><!--theme-layout end-->


	<script type="text/javascript" src="../static/js/jquery.min.js"></script>
	<script type="text/javascript" src="../static/js/popper.js"></script>
	<script type="text/javascript" src="../static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../static/lib/slick/slick.min.js"></script>
	<script type="text/javascript" src="../static/js/script.js"></script>
	<!-- 滑块验证码-->
	<script>
		//文本框验证
		$("#uid,#name,#phone,#check,#pwd").focus(function () {
			$("#uid_check,#name_check,#phone_check,#check_check,#pwd_check").text('');
		});

		//11位手机号验证
		function check_phone() {
			var text = $("#phone").val();//取值
			var flag = text.length == 11;//判断条件
			if (!flag) {
				$("#phone_check").text("请输入正确的11位手机号！")//错误提示
			}
			return flag;//返回结果
		}

		//uid验证
		function check_uid() {
			var text = $("#uid").val();//取值
			var flag = text.length >= 6 && text.length <= 16;//判断条件
			if (!flag) {
				$("#uid_check").text("uid为6-16位字符")//错误提示
			}
			return flag;//返回结果
		}

		//用户名验证
		function check_name() {
			var text = $("#name").val();//取值
			var flag = text.length >= 1 && text.length <= 8;//判断条件
			if (!flag) {
				$("#name_check").text("用户名为为1-8位字符")//错误提示
			}
			return flag;//返回结果
		}

		//验证码验证
		function check_check() {
			var text = $("#check").val();//取值
			var flag = text.length == 6;//判断条件
			if (!flag) {
				$("#check_check").text("验证码为6位数字")//错误提示
			}
			return flag;//返回结果
		}

		//密码验证
		function check_pwd() {
			var text = $("#pwd").val();//取值
			var flag = text.length >= 6 && text.length <= 20;//判断条件
			if (!flag) {
				$("#pwd_check").text("密码为6-20位字符")//错误提示
			}
			return flag;//返回结果
		}

		//用户协议验证
		function contract() {
			var text = $("#contract").val();//取值
			var flag = $("#contract")[0].checked;//判断条件
			if (!flag) {
				$("#contract_check").text("请同意用户协议")//错误提示
			} else {
				$("#contract_check").text("")
			}
			return flag;//返回结果
		}

		$("#contract").click(function () {
			if (!contract()) {
				$("#contract_check").text("请同意用户协议")//错误提示
			} else {
				$("#contract_check").text("")
			}
		})

		//注册验证
		function register() {
			return check_uid() && check_name() && check_phone() && check_check() && check_pwd() && contract();
		}

		//滑块验证相关
		hk();

		function hk() {
			//一、定义一个获取DOM元素的方法
			var sel = function (selector) {
						return document.querySelector(selector);
					},
					box = sel(".drag"),//容器
					bg = sel(".bg"),//背景
					text = sel(".text"),//文字
					btn = sel(".btn"),//滑块
					success = false,//是否通过验证的标志
					distance = 230;//滑动成功的宽度（距离）
			// distance=box.offsetWidth - btn.offsetWidth+230;//滑动成功的宽度（距离）
			//二、给滑块注册鼠标按下事件
			btn.onmousedown = function hk_onmousedown(e) {

				//1.鼠标按下之前必须清除掉后面设置的过渡属性
				btn.style.transition = "";
				bg.style.transition = "";

				//说明：clientX 事件属性会返回当事件被触发时，鼠标指针向对于浏览器页面(或客户区)的水平坐标。

				//2.当滑块位于初始位置时，得到鼠标按下时的水平位置
				var e = e || window.event;
				var downX = e.clientX;

				//三、给文档注册鼠标移动事件
				document.onmousemove = function (e) {


					var e = e || window.event;
					//1.获取鼠标移动后的水平位置
					var moveX = e.clientX;

					//2.得到鼠标水平位置的偏移量（鼠标移动时的位置 - 鼠标按下时的位置）
					var offsetX = moveX - downX;

					//3.在这里判断一下：鼠标水平移动的距离 与 滑动成功的距离 之间的关系
					if (offsetX > distance) {
						offsetX = distance;//如果滑过了终点，就将它停留在终点位置
					} else if (offsetX < 0) {
						offsetX = 0;//如果滑到了起点的左侧，就将它重置为起点位置
					}

					//4.根据鼠标移动的距离来动态设置滑块的偏移量和背景颜色的宽度
					btn.style.left = offsetX + "px";
					bg.style.width = offsetX + 40 + "px";


					//如果鼠标的水平移动距离 = 滑动成功的宽度
					if (offsetX == distance) {
						//1.设置滑动成功后的样式
						text.innerHTML = "验证码已发送！";
						text.style.color = "#fff";
						btn.innerHTML = "&radic;";
						btn.style.color = "green";
						bg.style.backgroundColor = "lightgreen";

						//2.设置滑动成功后的状态
						success = true;
						//成功后，清除掉鼠标按下事件和移动事件（因为移动时并不会涉及到鼠标松开事件）
						btn.onmousedown = null;
						document.onmousemove = null;
						//3.成功解锁后的回调函数
						if (check_phone()) {
							// setTimeout(function(){
							// 	alert('验证码已发送！60s');
							// },100);
							//发送验证码
							var phone = $("#phone").val();
							$.ajax({
								url: "/user/senCode",
								data: {"phone": phone},
								dataType: "json"
							})
							var count = 59;
							var timer01 = setInterval(function () {
								if (count > 0) {
									text.innerHTML = "验证码已发送！" + count + "s";
									count--;
									//禁用滑块
								} else {
									text.innerHTML = "拖动滑块重新发送验证码";
									//取消定时器
									clearInterval(timer01);
									//启用滑块（还原样式）
									btn.style.left = 0;
									bg.style.width = 0;
									btn.style.transition = "left 1s ease";
									bg.style.transition = "width 1s ease";
									text.style.color = "#000";
									btn.innerHTML = "&gt;&gt;";
									btn.style.color = "#666";
									bg.style.backgroundColor = "#75CDF9";
									hk();
								}

							}, 1000)
						} else {
							text.innerHTML = "拖动滑块重新发送验证码";
							//启用滑块（还原样式）
							btn.style.left = 0;
							bg.style.width = 0;
							btn.style.transition = "left 1s ease";
							bg.style.transition = "width 1s ease";
							text.style.color = "#000";
							btn.innerHTML = "&gt;&gt;";
							btn.style.color = "#666";
							bg.style.backgroundColor = "#75CDF9";
							hk();
						}
					}
				}
			}

			//四、给文档注册鼠标松开事件
			document.onmouseup = function dc_onmouseup(e) {

				//如果鼠标松开时，滑到了终点，则验证通过
				if (success) {
					return;
				} else {
					//反之，则将滑块复位（设置了1s的属性过渡效果）
					btn.style.left = 0;
					bg.style.width = 0;
					btn.style.transition = "left 1s ease";
					bg.style.transition = "width 1s ease";
				}
				//只要鼠标松开了，说明此时不需要拖动滑块了，那么就清除鼠标移动和松开事件。
				document.onmousemove = null;
				document.onmouseup = null;
			}
		}
	</script>
</body>
</html>